<template>
  <div>
    <div v-if="grade == 1" class="">检查血常规（五分类）</div>
    <br v-if="grade == 1" />
    <el-table :data="tableData" height="500">
      <el-table-column prop="sequence" label="编号" width="80"> </el-table-column>
      <el-table-column prop="contentNam" label="检查内容名称" width="220">
      </el-table-column>
      <el-table-column prop="units" label="计量单位" width="120">
      </el-table-column>
      <el-table-column prop="scopeApplication" label="正常值参考范围"> </el-table-column>
      <el-table-column prop="pathogeny" label="病因提示"> </el-table-column>
      <el-table-column
        fixed="right"
        :width="grade == 1 ? 250 : 180"
        prop="address"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-button @click="remove(scope.row)" type="danger" size="small"
            >删除</el-button
          >
          <el-button
            v-if="grade == 1"
            @click="resultClick(scope.row)"
            type="success"
            size="small"
            >常用结果</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <addPagesContent :dialogFormcontent="dialogFormcontent"></addPagesContent>
    <!-- 底部分类常用结果 -->

    <el-dialog
      title="编辑体检项目常用结果 ->血常规五分类"
      :visible.sync="dialogresultClick"
      width="1000px"
      class="top_dialog"
    >
      <el-form :model="form" :inline="true" label-position="top">
        <div class="">
          <el-form-item label="常用结果名称" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 4 }"
              v-model="form.desc"
            ></el-input>
          </el-form-item>
          <el-form-item label="健康指导" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 4 }"
              v-model="form.desc"
            ></el-input>
          </el-form-item>
          <el-form-item label="" class="project_group">
            <el-checkbox-group v-model="form.type">
              <el-checkbox
                class="info_sel_r_group"
                label="公用"
                name="type"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <div class="project_btn">
            <el-button type="success" @click="dialogFormVisible = false"
              >添 加</el-button
            >
            <el-button
              class="project_btn_r"
              type="primary"
              @click="dialogFormVisible = false"
              >保 存</el-button
            >
          </div>
        </div>
      </el-form>
      <div>
        <el-table :data="tableData">
          <el-table-column prop="date" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="name" label="检查结果名称" width="300">
          </el-table-column>
          <el-table-column prop="name" label="健康指导" width="300">
          </el-table-column>
          <el-table-column prop="address" label="是否公用" width="80">
            <template slot-scope="scope">
              <el-checkbox :disabled="scope.row" label=""></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column fixed="right" prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="primary"
                size="small"
                >编辑</el-button
              >
              <el-button @click="remove(scope.row)" type="danger" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >保 存</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import addPagesContent from "./addPagesContent.vue";
export default {
  components: {
    addPagesContent,
  },
  data() {
    return {
      formLabelWidth:'80px',
      // 常用结果弹框
      dialogFormresult: false,
      dialogresultClick: false,
      form: { type: "" },
      dialogFormcontent: false,
      tableData:[
    {
        "sequence":"1",
        "contentName":"白细胞",
        "units":"mg",
        "scopeApplication":"4.0—10.0",
        "pathogeny":"*****----*****"
    },
    {
        "sequence":"2",
        "contentName":"血红蛋白",
        "units":"mg",
        "scopeApplication":"110—155",
        "pathogeny":"*****----*****"
    },
    {
        "sequence":"3",
        "contentName":"红细胞比积",
        "units":"mg",
        "scopeApplication":"33.5—45.0",
        "pathogeny":"*****----*****"
    },
    {
        "sequence":"4",
        "contentName":"平均红细胞体积",
        "units":"mg",
        "scopeApplication":"80.0—99",
        "pathogeny":"*****----*****"
    },
    {
        "sequence":"5",
        "contentName":"平均红细胞血红蛋白含量",
        "units":"mg",
        "scopeApplication":"26.0—33.0",
        "pathogeny":"*****----*****"
    }
] ,
    };
  },
  methods: {
    // 编辑
    handleClick(row) {
      console.log("123");
      this.dialogFormcontent = true;
    },
    // 常用结果
    resultClick() {
      this.dialogresultClick = true;
    },
  },
  props: {
    grade: {
      type: Number,
      default: true,
    },
  },
};
</script>

<style scoped>
.dialog_flex {
  display: flex;
}
.dialog_flex_r {
  margin-left: 20px;
}
.el-form--inline .el-form-item {
  width: 300px;
}
.project_group {
  width: 100px !important;
  margin-top: 40px;
  margin-left: 20px;
}
.project_btn {
  width: 100px;
  float: right;
  text-align: right;
  margin-right: 80px;
  margin-top: 20px;
}
.project_btn .project_btn_r {
  margin-top: 20px;
}
</style>